<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
  <div>
    <router-link to="/manager/home">跳转home页面</router-link>
    <br>
    <a href="/home">a跳转home页面</a>
    <br>
    <el-button type="primary" @click="router.push('/manager/home')">push按钮</el-button>
    <el-button type="primary" @click="router.replace('/manager/home')">replace按钮</el-button>
  </div>
  <div style="margin-bottom: 20px">
    <el-button type="primary" @click="router.push('/manager/home?id=11&name=nihao')">传参路由1</el-button>
    <el-button type="primary" @click="router.push({ path: '/manager/home', query: { id: 11, name: 'nihao' } })">
      传参路由2
    </el-button>
  </div>
  <div>
    <el-input
        v-model="input"
        style="width: 240px"
        :suffix-icon="Calendar"
        clearable placeholder="输入"
    />
    {{ input }}
    <el-input
        v-model="textarea"
        style="width: 240px"
        type="textarea"
        placeholder="Please input"
        :autosize="{ minRows: 2, maxRows: 4 }"
    />
    <el-input
        v-model="input"
        style="max-width: 600px"
        placeholder="Please input"
    >
      <template #prepend>Http://</template>
    </el-input>
    <el-input
        v-model="input"
        style="max-width: 600px"
        placeholder="Please input"
    >
      <template #append>.com</template>
    </el-input>
    <el-select
        v-model="input"
        placeholder="Select"
        size="large"
        style="width: 240px"
        clearable
        multiple
    >
      <el-option
          v-for="item in data.options"
          :key="item"
          :label="item"
          :value="item"
      />
    </el-select>
    <el-radio-group v-model="input">
      <el-radio :value="3">Option A</el-radio>
      <el-radio :value="6">Option B</el-radio>
      <el-radio :value="9">Option C</el-radio>
    </el-radio-group>
    <el-radio-group v-model="input" size="large">
      <el-radio-button label="New York" value="New York"/>
      <el-radio-button label="Washington" value="Washington"/>
      <el-radio-button label="Los Angeles" value="Los Angeles"/>
      <el-radio-button label="Chicago" value="Chicago"/>
    </el-radio-group>
    <el-checkbox-group v-model="data.arr">
      <el-checkbox v-for="item in data.options" :key="item" :value="item"/>

    </el-checkbox-group>
    <p>{{ data.arr }}</p>
  </div>
  <div>
    <span class="demonstration">Motion blur the switch (default)</span>
    <el-carousel height="200px" style="width: 400px" motion-blur type="card">
      <el-carousel-item v-for="img in data.imgs" :key="img">
        <img :src="img" alt="" style="width: 100%; height: 100%; object-fit: cover;">
      </el-carousel-item>
    </el-carousel>
  </div>

  <div>
    <el-date-picker v-model="input" type="date" placeholder="选择日期" value-format="YYYY/MM/DD"/>
    <el-date-picker v-model="input" type="datetime" placeholder="选择日期" value-format="YYYY/MM/DD HH/MM/ss"/>
  </div>
  <el-table :data="data.tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180"/>
    <el-table-column prop="name" label="Name" width="180"/>
    <el-table-column prop="address" label="Address"/>
  </el-table>
  <el-pagination
      v-model:current-page="data.currentPage4"
      v-model:page-size="data.pageSize4"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="data.tableData.length"
  />
</template>

<script setup>
import {reactive, ref} from 'vue';
import {Calendar} from "@element-plus/icons-vue";
import img1 from "@/assets/img1.png"
import img2 from "@/assets/img2.png"
import img3 from "@/assets/img3.png"
import router from "@/router/index.js";
// 响应式数据
const title = ref('element-plus语法糖示例');
const input = ref('');
const textarea = ref('');
const data = reactive(
    {
      options: ['苹果', '香蕉', '橙子'],
      arr: [],
      imgs: [img1, img2, img3],
      currentPage4: 1,
      pageSize4: 6,

      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1511 弄'
        },
      ]
    }
);
const fits = [
  'fill',
  'contain',
  'cover',
  'none',
  'scale-down',
]
</script>

<style scoped>
div {
  padding: 20px;
  font-family: Arial, sans-serif;
}
</style>
